import { ImageUploader, Toast } from 'antd-mobile';
import React, { useState } from 'react';
import moment from 'moment';

export default () => {
  const [fileList, setFileList] = useState([]);

  //通过file数据产生图片
  const createfileImg = file => {
    return new Promise(resolve => {
      const img = new Image();
      img.src = URL.createObjectURL(file);
      //img绑定load事件（载入完毕后 返出图片Dom）
      img.addEventListener('load', () => resolve(img));
    });
  };

  //画布配置
  const handleCanvas = img => {
    const canvas = document.createElement('canvas');
    canvas.width = 300; //也可使用图片的宽 和 高
    canvas.height = 300;
    //返回一个用于绘画的环境
    const ctx = canvas.getContext('2d');
    //写入图片
    ctx.drawImage(img, 0, 0, 300, 300);

    //写入水印文字
    ctx.font = '700 20px microsoft yahei';
    ctx.fillStyle = '#fff';
    ctx.textAlign = 'left';
    ctx.fillStyle = 'rgba(255, 255, 255,)';
    ctx.fillText(`${moment().format('YYYY-MM-DD HH:mm:ss')}`, 20, 290);

    return canvas;
  };

  //创建blob对象，用于展示画布上的图片
  function createCanvasBlob(canvas) {
    return new Promise(resolve => {
      canvas.toBlob(blob => resolve(blob));
    });
  }

  const handleUpload = async file => {
    const fileImg = await createfileImg(file);

    const canvasImg = handleCanvas(fileImg);

    const blobImg = await createCanvasBlob(canvasImg);
    Toast.show('哈哈');
    return {
      url: URL.createObjectURL(blobImg),
    };
  };

  return <ImageUploader value={fileList} onChange={setFileList} upload={handleUpload} />;
};

/*
<script>
export default {
  methods: {
    upload(e) {
      const file = e.target.files[0];
      if (!file) return;
      const filePath = window.URL.createObjectURL(file);
      const img = new Image();
      img.src = filePath;
      img.onload = () => {
        const newFile = this.addWaterMark(img, file.name);
        console.log(newFile);
      }
    },
    addWaterMark(img, fileName) {
      const canvas = document.getElementById('canvas');
      const imgWidth = img.width;
      const imgHeight = img.height;
      canvas.width = imgWidth;
      canvas.height = imgHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      // 平铺水印
      const canvasWater = document.createElement('canvas');
      const waterMarkSize = 200; // 水印大小
      canvasWater.width = waterMarkSize;
      canvasWater.height = waterMarkSize;
      const ctxWater = canvasWater.getContext('2d');
      ctxWater.textAlign = 'left';
      ctxWater.textBaseline = 'top';
      ctxWater.font = '12px Microsoft Yahei';
      ctxWater.fillStyle = 'rgba(255, 255, 255, 0.3)';
      ctxWater.rotate(-20 * Math.PI/180);
      ctxWater.fillText('橙某人', 60, 80);
      ctxWater.fillText('2022年11月22日 09:22:30', 10, 100);
      ctx.fillStyle = ctx.createPattern(canvasWater, 'repeat');
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      const base64 = canvas.toDataURL('image/jpeg', 0.8)
      return this.dataURLtoBlob(base64, fileName)
    }
  },
  // base64转文件对象
  dataURLtoBlob(dataurl, name) {
    const arr = dataurl.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], name, {
      type: mime
    })
  }
};

*/
